<template>
  <div class="course">
    <course-item :list="normalList"></course-item>
    <el-divider v-if="expiredList.length > 0" content-position="center">过期课程</el-divider>
    <course-item :list="expiredList" expired></course-item>
    <edu-no-data v-if="!loading && normalList.length == 0 && expiredList.length == 0"></edu-no-data>
  </div>
</template>

<script>
import courseItem from './components/course-item.vue'
import EduNoData from '@/components/EduNoData'
export default {
  components: {
    courseItem,
    EduNoData
  },
  data() {
    return {
      normalList: [],
      expiredList: [],
      loading: true
    }
  },
  created() {
    this.handleCourseInfo()
  },
  methods: {
    handleCourseInfo() {
      this.$api.getRecordCourse(
        {
          course_type: 4,
          order: 'add'
        },
        res => {
          const { data } = res
          this.normalList = data.normal
          this.expiredList = data.expired
          setTimeout(() => {
            this.loading = false
          }, 200)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.el-divider--horizontal {
  width: 276px;
  margin-left: auto;
  margin-right: auto;
}
.el-divider__text {
  color: #b7bac1;
}
</style>
